@use './variables.scss' as *;

/**
 * 全局暗黑模式主题样式
 * 通过 @media (prefers-color-scheme: dark) 自动响应系统暗黑模式偏好
 * 覆盖 Element Plus 大部分组件
 */

/**
 * 暗黑模式媒体查询 - 自动响应系统暗黑模式偏好
 */
@media (prefers-color-scheme: dark) {
  // Element Plus 暗黑模式 CSS 变量
  :root {
    --el-bg-color: #{$dark-bg-color-base};
    --el-bg-color-page: #0a0e27;
    --el-bg-color-overlay: #{$dark-bg-color-light};
    --el-text-color-primary: #{$dark-text-color-primary};
    --el-text-color-regular: #{$dark-text-color-secondary};
    --el-text-color-secondary: #{$dark-text-color-muted};
    --el-text-color-placeholder: #{$dark-text-color-disabled};
    --el-text-color-disabled: #{$dark-text-color-disabled};
    --el-border-color: #{$dark-border-color-base};
    --el-border-color-light: #2c3e50;
    --el-border-color-lighter: #263238;
    --el-border-color-extra-light: #21272c;
    --el-fill-color: #2d3748;
    --el-fill-color-light: #374151;
    --el-fill-color-lighter: #1f2937;
    --el-fill-color-extra-light: #1a202c;
    --el-fill-color-dark: #1e293b;
    --el-fill-color-darker: #0f172a;
    --el-fill-color-blank: transparent;

    // 遮罩层颜色
    --el-overlay-color: rgba(0, 0, 0, 0.7);
    --el-overlay-color-light: rgba(0, 0, 0, 0.5);
    --el-overlay-color-lighter: rgba(0, 0, 0, 0.3);

    // 盒子阴影
    --el-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5);
    --el-box-shadow-light: 0 2px 8px 0 rgba(0, 0, 0, 0.3);
    --el-box-shadow-lighter: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
    --el-box-shadow-dark: 0 4px 16px 0 rgba(0, 0, 0, 0.6);

    // 禁用状态
    --el-disabled-bg-color: #1e293b;
    --el-disabled-text-color: #{$dark-text-color-disabled};
    --el-disabled-border-color: #2d3748;

    color-scheme: dark;
  }

  // 全局背景色
  body {
    background-color: #{$dark-bg-color-base} !important;
    color: #{$dark-text-color-primary} !important;
  }

  // 按钮组件
  .el-button {
    &--default {
      background-color: #2d3748 !important;
      border-color: #4b5563 !important;
      color: #{$dark-text-color-primary} !important;

      &:hover {
        background-color: #374151 !important;
        border-color: #6b7280 !important;
      }
    }

    &--primary {
      &:hover {
        background-color: $primary-color-light !important;
      }
    }

    &--text {
      color: #{$dark-text-color-primary} !important;

      &:hover {
        background-color: #374151 !important;
      }
    }
  }

  // 表单组件（Input, Textarea）
  .el-input__wrapper,
  .el-textarea__inner {
    background-color: #2d3748 !important;
    border-color: #4b5563 !important;
    box-shadow: 0 0 0 1px #4b5563 inset !important;

    &:hover {
      box-shadow: 0 0 0 1px #6b7280 inset !important;
    }
  }

  .el-input__inner,
  .el-textarea__inner {
    color: #{$dark-text-color-primary} !important;

    &::placeholder {
      color: #{$dark-text-color-disabled} !important;
    }
  }

  .el-input.is-disabled .el-input__wrapper {
    background-color: #1e293b !important;
  }

  // Select 选择器
  .el-select .el-input__wrapper {
    background-color: #2d3748 !important;
    border-color: #4b5563 !important;
    box-shadow: 0 0 0 1px #4b5563 inset !important;
  }

  // 表格组件
  .el-table {
    --el-table-bg-color: #{$dark-bg-color-light} !important;
    --el-table-tr-bg-color: #{$dark-bg-color-light} !important;
    --el-table-header-bg-color: #1e293b !important;
    --el-table-row-hover-bg-color: #374151 !important;
    --el-table-border-color: #4b5563 !important;

    th.el-table__cell {
      background-color: #1e293b !important;
      color: #{$dark-text-color-primary} !important;
    }

    td.el-table__cell {
      border-color: #374151 !important;
    }

    .el-table__body tr:hover > td {
      background-color: #374151 !important;
    }
  }

  .el-table--striped .el-table__body tr.el-table__row--striped td {
    background-color: #1a202c !important;
  }

  // 下拉菜单和弹出层
  .el-popper,
  .el-select-dropdown,
  .el-picker-panel,
  .el-dropdown-menu {
    background-color: #{$dark-bg-color-light} !important;
    border-color: #4b5563 !important;
  }

  .el-select-dropdown__item,
  .el-dropdown-menu__item {
    color: #{$dark-text-color-primary} !important;

    &:hover {
      background-color: #374151 !important;
    }

    &.is-selected {
      color: $primary-color !important;
    }
  }

  .el-picker-panel__content {
    color: #{$dark-text-color-primary} !important;
  }

  .el-date-table td.available:hover {
    color: $primary-color !important;
  }

  .el-date-table td.current:not(.disabled) span {
    background-color: $primary-color !important;
  }

  // 对话框和抽屉
  .el-dialog,
  .el-drawer {
    background-color: #{$dark-bg-color-light} !important;

    .el-dialog__header,
    .el-drawer__header {
      color: #{$dark-text-color-primary} !important;
      border-color: #374151 !important;
    }

    .el-dialog__body,
    .el-drawer__body {
      color: #{$dark-text-color-primary} !important;
    }

    .el-dialog__footer {
      border-color: #374151 !important;
    }
  }

  .el-dialog__headerbtn .el-dialog__close,
  .el-drawer__close-btn {
    color: #{$dark-text-color-secondary} !important;

    &:hover {
      color: #{$dark-text-color-primary} !important;
    }
  }

  // 卡片组件
  .el-card {
    background-color: #{$dark-bg-color-light} !important;
    border-color: #4b5563 !important;

    .el-card__header {
      border-color: #374151 !important;
      color: #{$dark-text-color-primary} !important;
    }

    .el-card__body {
      color: #{$dark-text-color-primary} !important;
    }
  }

  // 分页组件
  .el-pagination {
    .el-pagination__total,
    .el-pagination__jump {
      color: #{$dark-text-color-primary} !important;
    }

    .el-pager li {
      background-color: #2d3748 !important;
      color: #{$dark-text-color-primary} !important;

      &:hover {
        color: $primary-color !important;
      }

      &.is-active {
        background-color: $primary-color !important;
        color: #ffffff !important;
      }
    }

    .btn-prev,
    .btn-next {
      background-color: #2d3748 !important;
      color: #{$dark-text-color-primary} !important;

      &:hover {
        color: $primary-color !important;
      }
    }
  }

  // 消息提示
  .el-message,
  .el-notification {
    background-color: #{$dark-bg-color-light} !important;
    border-color: #4b5563 !important;

    .el-message__content,
    .el-notification__content {
      color: #{$dark-text-color-primary} !important;
    }
  }

  // 菜单组件
  .el-menu {
    background-color: #{$dark-bg-color-light} !important;
    border-color: #374151 !important;

    .el-menu-item,
    .el-sub-menu__title {
      color: #{$dark-text-color-primary} !important;

      &:hover {
        background-color: #374151 !important;
      }

      &.is-active {
        color: $primary-color !important;
      }
    }
  }

  .el-menu--collapse {
    .el-menu-item,
    .el-sub-menu__title {
      &:hover {
        background-color: #374151 !important;
      }
    }
  }

  // 标签页组件
  .el-tabs {
    .el-tabs__header {
      border-color: #374151 !important;
    }

    .el-tabs__nav-wrap::after {
      background-color: #374151 !important;
    }

    .el-tabs__item {
      color: #{$dark-text-color-secondary} !important;

      &:hover {
        color: $primary-color !important;
      }

      &.is-active {
        color: $primary-color !important;
      }
    }

    .el-tabs__active-bar {
      background-color: $primary-color !important;
    }
  }

  // 开关组件
  .el-switch {
    .el-switch__core {
      border-color: #4b5563 !important;
      background-color: #4b5563 !important;
    }

    &.is-checked .el-switch__core {
      border-color: $primary-color !important;
      background-color: $primary-color !important;
    }
  }

  // Loading 加载组件
  .el-loading-mask {
    background-color: rgba(0, 0, 0, 0.8) !important;
  }

  .el-loading-spinner {
    .el-loading-text {
      color: #{$dark-text-color-primary} !important;
    }

    .path {
      stroke: $primary-color !important;
    }
  }

  // 表单组件
  .el-form {
    .el-form-item__label {
      color: #{$dark-text-color-primary} !important;
    }

    .el-form-item__error {
      color: $danger-color !important;
    }
  }

  // Checkbox 和 Radio
  .el-checkbox__label,
  .el-radio__label {
    color: #{$dark-text-color-primary} !important;
  }

  .el-checkbox__inner,
  .el-radio__inner {
    background-color: #2d3748 !important;
    border-color: #4b5563 !important;
  }

  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-radio__input.is-checked .el-radio__inner {
    background-color: $primary-color !important;
    border-color: $primary-color !important;
  }

  // Collapse 折叠面板
  .el-collapse {
    border-color: #374151 !important;
  }

  .el-collapse-item__header {
    background-color: #{$dark-bg-color-light} !important;
    color: #{$dark-text-color-primary} !important;
    border-color: #374151 !important;
  }

  .el-collapse-item__content {
    background-color: #{$dark-bg-color-light} !important;
    color: #{$dark-text-color-primary} !important;
  }

  // 滚动条样式
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background-color: #{$dark-bg-color-base};
  }

  ::-webkit-scrollbar-thumb {
    background-color: #4b5563;
    border-radius: 4px;

    &:hover {
      background-color: #6b7280;
    }
  }

  .el-scrollbar__thumb {
    background-color: #4b5563 !important;
  }

  // Tree 树形组件
  .el-tree {
    background-color: transparent !important;
    color: #{$dark-text-color-primary} !important;

    // 树节点内容
    .el-tree-node__content {
      color: #{$dark-text-color-primary} !important;

      &:hover {
        background-color: #374151 !important;
      }

      &:focus {
        background-color: #374151 !important;
      }
    }

    // 当前选中节点
    .el-tree-node.is-current > .el-tree-node__content {
      background-color: $primary-color-alpha-20 !important;
      color: $primary-color !important;
    }

    // 展开/折叠图标
    .el-tree-node__expand-icon {
      color: #{$dark-text-color-secondary} !important;

      &:hover {
        color: #{$dark-text-color-primary} !important;
      }

      &.is-leaf {
        color: transparent !important;
      }
    }

    // 节点标签
    .el-tree-node__label {
      color: #{$dark-text-color-primary} !important;
    }

    // 复选框样式
    .el-tree-node__checkbox {
      .el-checkbox__inner {
        background-color: #2d3748 !important;
        border-color: #4b5563 !important;
      }

      &.is-checked .el-checkbox__inner {
        background-color: $primary-color !important;
        border-color: $primary-color !important;
      }

      &.is-indeterminate .el-checkbox__inner {
        background-color: $primary-color !important;
        border-color: $primary-color !important;
      }
    }

    // 禁用状态
    .el-tree-node.is-disabled {
      .el-tree-node__content {
        color: #{$dark-text-color-disabled} !important;
        cursor: not-allowed !important;
      }
    }

    // 拖拽状态
    .el-tree-node__content.is-drop-inner {
      background-color: $primary-color-alpha-20 !important;
      border-color: $primary-color !important;
    }

    // 加载中状态
    .el-tree-node__loading-icon {
      color: $primary-color !important;
    }
  }

  // Upload 上传组件
  .el-upload {
    border-color: #4b5563 !important;

    &:hover {
      border-color: $primary-color !important;
    }
  }

  .el-upload-dragger {
    background-color: #2d3748 !important;
    border-color: #4b5563 !important;

    &:hover {
      border-color: $primary-color !important;
    }

    .el-upload__text {
      color: #{$dark-text-color-primary} !important;
    }
  }

  .el-upload-list__item {
    background-color: #2d3748 !important;
    border-color: #4b5563 !important;
    color: #{$dark-text-color-primary} !important;
  }

  // Tooltip 文字提示
  .el-tooltip__popper {
    background-color: #{$dark-bg-color-light} !important;
    border-color: #4b5563 !important;
  }

  // Popover 弹出框
  .el-popover {
    background-color: #{$dark-bg-color-light} !important;
    border-color: #4b5563 !important;
    color: #{$dark-text-color-primary} !important;
  }

  // Breadcrumb 面包屑
  .el-breadcrumb__item {
    .el-breadcrumb__inner {
      color: #{$dark-text-color-secondary} !important;

      &:hover {
        color: $primary-color !important;
      }
    }

    &:last-child .el-breadcrumb__inner {
      color: #{$dark-text-color-primary} !important;
    }
  }

  .el-breadcrumb__separator {
    color: #{$dark-text-color-disabled} !important;
  }

  // Tag 标签
  .el-tag {
    &--dark {
      border-color: #4b5563 !important;
    }

    &--light {
      background-color: #2d3748 !important;
      border-color: #4b5563 !important;
    }
  }

  // Progress 进度条
  .el-progress__text {
    color: #{$dark-text-color-primary} !important;
  }

  // Alert 提示
  .el-alert {
    background-color: #2d3748 !important;
    border-color: #4b5563 !important;

    .el-alert__title,
    .el-alert__description {
      color: #{$dark-text-color-primary} !important;
    }
  }

  // Steps 步骤条
  .el-steps {
    .el-step__title {
      color: #{$dark-text-color-primary} !important;
    }

    .el-step__description {
      color: #{$dark-text-color-secondary} !important;
    }

    .el-step__head.is-process {
      color: $primary-color !important;
      border-color: $primary-color !important;
    }
  }

  // Slider 滑块
  .el-slider__runway {
    background-color: #4b5563 !important;
  }

  .el-slider__bar {
    background-color: $primary-color !important;
  }

  // Transfer 穿梭框
  .el-transfer {
    .el-transfer-panel {
      background-color: #{$dark-bg-color-light} !important;
      border-color: #4b5563 !important;

      .el-transfer-panel__header {
        background-color: #1e293b !important;
        border-color: #374151 !important;
        color: #{$dark-text-color-primary} !important;
      }

      .el-transfer-panel__body {
        color: #{$dark-text-color-primary} !important;
      }
    }
  }

  // Calendar 日历
  .el-calendar {
    .el-calendar__header {
      border-color: #374151 !important;
    }

    .el-calendar__title {
      color: #{$dark-text-color-primary} !important;
    }

    .el-calendar-table {
      thead th {
        color: #{$dark-text-color-primary} !important;
      }

      .el-calendar-day {
        color: #{$dark-text-color-primary} !important;
      }
    }
  }

  // Descriptions 描述列表
  .el-descriptions {
    .el-descriptions__header {
      .el-descriptions__title {
        color: #{$dark-text-color-primary} !important;
      }
    }

    .el-descriptions__label {
      color: #{$dark-text-color-secondary} !important;
    }

    .el-descriptions__content {
      color: #{$dark-text-color-primary} !important;
    }
  }

  // Result 结果
  .el-result {
    .el-result__title {
      color: #{$dark-text-color-primary} !important;
    }

    .el-result__subtitle {
      color: #{$dark-text-color-secondary} !important;
    }
  }
}
